<template>
	<view class="wrap">
		<view class="top"></view>
		<view class="content">
			<view class="title">欢迎使用</view>
			<view class="disc">wandroid</view>

			<input class="u-border-bottom tel" type="text" v-model="username" placeholder="请输入用户名" />
			<!-- <input class="u-border-bottom pass" type="email" v-model="email" placeholder="请输入邮箱" /> -->
			<input class="u-border-bottom pass" type="password" v-model="password1" placeholder="请输入密码" />
			<input class="u-border-bottom pass" type="password" v-model="password2" placeholder="请输入密码" />

			<u-button :custom-style="customStyle" @click="regist">注册账号</u-button>

			<view class="login" @click="login">去登录</view>
		</view>
		<view class="bottom">本程序使用uniapp开发</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				email: '',
				password1: '',
				password2: '',
				customStyle: {
					margin: '30px', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					backgroundColor: "blue",
					color: "white"
				}
			}
		},
		methods: {
			regist() {
				console.log("注册");
			
				if (Object.keys(this.username).length === 0) {
					this.$refs.uToast.show({
						title: '手机号不能为空',
						type: 'error'
					})
					return;
				}
				// else if (Object.keys(this.email).length === 0) {
				// 	this.$refs.uToast.show({
				// 		title: '邮箱不能为空',
				// 		type: 'error'
				// 	})
				// 	return;
				// } 
				else if (Object.keys(this.password1).length === 0) {
					this.$refs.uToast.show({
						title: '密码不能为空',
						type: 'error'
					})
					return;
				} else if (Object.keys(this.password2).length === 0) {
					this.$refs.uToast.show({
						title: '请确认密码',
						type: 'error'
					})
					return;
				} else if (this.password1 !== this.password2) {
					this.$refs.uToast.show({
						title: '两次密码输入不一致',
						type: 'error'
					})
					return;
				}
				
				this.$u.post('/user/register', {
						username: this.username,
						password: this.password1,
						repassword: this.password2
					}, {
						"Content-Type": "application/x-www-form-urlencoded",
						dataType: 'json',
					}
					, ).then((res) => {
					this.$refs.uToast.show({
						title: '注册成功',
						type: 'success',
						url: '/pages/login/login'
					})
					console.log('pageIndex:' + this.pageIndex);
				}).catch((res) => {
					this.$refs.uToast.show({
						title: res.errorMsg,
						type: 'error',
					})
				})


			},
			login() {
				uni.navigateTo({
					url: '../login/login'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		font-size: 28rpx;

		.content {
			margin-top: 20%;
			font-size: 60rpx;
			font-weight: 500;
			margin: 80rpx auto 0;

			.title {
				text-align: center;
			}

			.disc {
				text-align: center;
				font-weight: 200;
				font-size: 20rpx;
			}

			.tel {
				margin: 300rpx 80rpx 60rpx 80rpx;
				font-size: 28rpx;
			}

			.pass {
				margin: 60rpx 80rpx 60rpx 80rpx;
				font-size: 28rpx;
			}

			.login {
				font-size: 28rpx;
				text-align: right;
				margin-right: 60rpx;
			}

		}

		.bottom {
			text-align: center;
			position: absolute;
			bottom: 20rpx;
			width: 100%;
		}
	}
</style>
